<template>
  <el-card class="newestArticle" shadow="naver">
    <div class="newestArticle-title">
      <i class="el-icon-third-update is-vertical iconfont-default" />
      <span class="newestArticle-title-text">最新文章</span>
    </div>
    <ul class="newestArticle-list">
      <li class="newestArticle-list-item" v-for="item of arr" :key="item">
        <div class="list-item-img">
          <router-link
            :to="{ path: '/articleDetail', query: { articleId: 1 } }"
            class="list-item-link"
          >
            <el-image :src="articleImg" fit="contain">
              <template #error>
                <div class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </template>
            </el-image>
          </router-link>
        </div>
        <div class="list-item-content">
          <router-link
            :to="{ path: '/articleDetail', query: { articleId: 1 } }"
            class="list-item-link"
          >
            <p class="list-item-content-text ellipsis2">
              在IDEA里搞Spring Boot Mybatis反向工程，太方便了～
            </p>
          </router-link>
          <p class="list-item-content-other">
            <i class="el-icon-third-date" />
            <time class="date">2020-11-21</time>
          </p>
        </div>
      </li>
    </ul>
  </el-card>
</template>

<script>
export default {
  name: "NewestArticle",
  data() {
    return {
      arr: [1, 2, 3, 4, 5],
      articleImg: "/article.png",
    };
  },
};
</script>

<style lang="stylus" scoped>
.newestArticle-title-text {
  margin-left: 0.1rem;
}

.newestArticle-list {
  color: var(--fontLevel2);
  font-size: 0.14rem;
}

.newestArticle-list-item {
  height: 0.88rem;
  padding: 0.1rem 0;
  display: flex;
  justify-content: space-between;
}

.list-item-img {
  width: 30%;
}

.el-image {
  height: 100%;
  border-radius: 0.03rem;
}

.el-image >>> img {
  transition: all 0.6s;
}

.el-image >>> img:hover {
  transform: scale(1.1);
}

.list-item-content {
  width: 65%;
  line-height: 0.2rem;
}

.list-item-content-text {
  transition: all 0.3s;
}

.list-item-content-text:hover {
  color: var(--colorLevel1);
}

.list-item-content-other {
  color: #858585;
  margin-top: 0.1rem;
}

.list-item-content-other i[class*="el-icon-third-"] {
  font-size: 0.14rem;
  margin-right: 0.05rem;
}
</style>


